<template>
  <div>
    <el-drawer
      :title="title"
      :visible.sync="drawer"
      width="70%"
      :append-to-body="true"
    >
      <el-form ref="form" :model="entity" label-width="100px" :rules="rules">
        <el-form-item label="分类名称" prop="Name">
          <a-input
            v-model="entity.Name"
            placeholder="请输入分类名称"
          ></a-input>
        </el-form-item>
        <el-form-item label="分类图片">
          <el-upload
            class="avatar-uploader"
            action="https://api.yoojet.com/Base_Manage/Upload/Filleimag"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
          >
            <img
              class="avatar"
              v-if="entity.CustomerSign"
              :src="entity.CustomerSign"
            />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
      </el-form>
      <div style="height: 50px"></div>
      <div
        :style="{
          position: 'absolute',
          right: 0,
          bottom: 0,
          width: '100%',
          borderTop: '1px solid #e9e9e9',
          padding: '5px 16px',
          background: '#fff',
          textAlign: 'right',
          zIndex: 99999,
        }"
      >
        <a-button @click="drawer = false">取消</a-button>
        <a-button type="primary" :loading="btnLoading" @click="handleSubmit"
          >保存</a-button
        >
      </div>
    </el-drawer>
  </div>
</template>
<script>
import CompanySearchSelect from "@/components/CompanySearchSelect.vue";
export default {
  components: {
    CompanySearchSelect,
  },
  props: {
    parentObj: { type: Object },
  },
  data() {
    return {
      drawer: false,
      direction: "rtl",
      // sign: "",
      entity: {},
      CustomerSign: "",
      rules: {
        Name: [{ required: true, message: "请输入分类名称", trigger: "blur" }],
        // SmsCode: [
        //   { required: true, message: "请输入静态验证码", trigger: "blur" },
        // ],
      },
      btnLoading: false,
      title: "",
      ProvinceList: [],
      CityList: [],
      CountyList: [],
    };
  },
  methods: {
    // 公司选择
    CompanySelect(row) {
      console.log(row);
    },
    handleAvatarSuccess(res, file) {},
    beforeAvatarUpload(file) {
      const isJPG = file.type === "image/jpeg" || file.type === "image/png";
      if (!isJPG) {
        return this.$message.error("请选择JPG/PNG格式图片");
      }
      var _this = this;
      var reader = new FileReader();
      reader.readAsDataURL(file);
      reader.onload = function (e) {
        // 图片base64化
        var newUrl = this.result; //图片路径
        _this.$set(_this.entity, "Icon", newUrl);
      };
    },
    init() {
      this.entity = {};
      // 编辑弹窗
      this.drawer = true;
      // let numArr = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9"];
      // let str = "";
      // for (let i = 0; i < 6; i++) {
      //   str += numArr[parseInt(Math.random() * 10)];
      // }
      // // this.entity.SmsCode = str;
      // this.$set(this.entity, "ISsignCode", true);
      // this.$set(this.entity, "SmsCode", str);
      // this.$nextTick(() => {
      //   this.$refs["form"].clearValidate();
      // });
    },
    openForm(Id) {
      console.log("获取传递过来的", Id);
      this.init();
      // if (CompanyId) {
      //   this.entity.CompanyId = CompanyId;
      // }
      this.title = "新增分类";
      console.log("获取新增过来的i获取新增过来的i获取新增过来的id", Id);
      if (Id) {
        this.title = "编辑分类";
        this.getTheData(Id);
      }
      // this.getProvinceList();
    },
    handleClose(done) {
      done();
    },
    // 获取编辑分类的详情数据
    getTheData(id) {
      this.$httpp.post("/BO/InventType/GetTheData", { id }).then((res) => {
        if (res.Success) {
          this.entity = res.Data;
        } else {
          this.$message.error(res.Msg);
        }
      });
    },
    changeProvince(e) {
      this.$set(this.entity, "cCity", "");
      this.$set(this.entity, "cCounty", "");
      this.getCityList(e);
    },
    changeCity(e) {
      this.$set(this.entity, "cCounty", "");
      this.getCountyList(e);
    },
    // 省列表
    getProvinceList() {
      this.$httpp
        .post("/Base_BasicData/Base_District/GetDataListByPId?pId=0", {})
        .then((resJson) => {
          this.ProvinceList = resJson.Data;
        });
    },
    // 市列表
    getCityList(id) {
      this.$httpp
        .post("/Base_BasicData/Base_District/GetDataListByPId?pId=" + id, {})
        .then((resJson) => {
          this.CityList = resJson.Data;
        });
    },
    // 区列表
    getCountyList(id) {
      this.$httpp
        .post("/Base_BasicData/Base_District/GetDataListByPId?pId=" + id, {})
        .then((resJson) => {
          this.CountyList = resJson.Data;
        });
    },
    handleSubmit() {
      this.$refs["form"].validate((valid) => {
        if (!valid) {
          return;
        }
        this.btnLoading = true;
        this.$httpp.post("/BO/InventType/SaveData", this.entity).then((res) => {
          this.btnLoading = false;
          if (res.Success) {
            this.$message.success("操作成功");
            this.parentObj.getDataList();
            this.dialogVisible = false;
          } else {
            this.$message.error(res.Msg);
          }
        });
      });
    },
  },
};
</script>

<style>
.drawerClass {
  padding: 10px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background: #fff;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 200px;
  height: 200px;
  line-height: 200px;
  text-align: center;
}
.avatar {
  width: 200px;
  height: 200px;
  display: block;
}
</style>
